Preventing Re-renders in ReactJS with memo

React memo function is used to prevent re-renders on the component when a parent changes, but the props to the child component do not change. Using memo will cause React to skip rendering a component if its props have not changed. This can improve performance.

To prevent needlessly re-rendering of child component wrap the child components export in memo function as shown below:

import { memo } from "react";

function ChildComponent() {

return <h1>Dashboard Component</h1>;

}

export default memo(ChildComponent);

All Chapters

Write and Publish a Tutorial!

Preventing Re-renders in ReactJS with memo